/* Développé par StrahDs et TrisTOON ; Juillet 2013 2.2 */

/* Eléments principaux de la page */

*
{
	line-height : 1.2em ;
}
html
{
	background : DarkCyan ;
}
body
{
	position : relative ;
	margin : 4em ;
}
[bendo]
{
	border-bottom : 1px solid black ;
	background : White url("Metransparence.png") ;
	background-position : right center ;
	background-size : 100% 100% ;
	color : blue ;
	font-size : 16px ;
	font-weight : bold ;
	box-shadow : 0 2px 16px black ;
}
askr:before
{
	content : "Conversions d'unités ||| " ;
}
header
{
	background : black ;
}
section
{
	display : none ;
	margin : 0.5em ;
	margin-left : 0px ;
	margin-right : 16.5em ;
	border-radius : 4px ;
	background : Khaki ;
	padding : 0.5em ;
}
section:target
{
	display : block ;
}
article
{
	margin : 0.5em ;
	border-radius : 4px ;
	border : solid 0.125em grey ;
	background : aliceblue ;
	background-position : bottom right !important ;
	background-repeat : no-repeat !important ;
	padding : 0.25em ;
	text-align : justify ;
}
article:hover
{
	border : solid 0.125em darkred ;
}
article:hover img.inutilisable
{
	border : dotted 0.125em darkred ;
}
aside
{
	position : fixed ;
	right : 4em ;
	margin-top : 0.5em ;
	border : 2px solid grey ;
	border-radius : 4px ;
	height : auto ;
	width : 15em ;
	background : gainsboro ;
	padding : 0.25em ;
	box-shadow : 2px 2px 6px black ;
}
aside:hover
{
	border : solid 0.125em darkred ;
}
aside h3:before
{
	position : absolute ;
	margin-top : 6px ;
	margin-left : -22px ;
	content : url("Images/Flèche gauche grey.png")
}
aside:hover h3:before
{
	content : url("Images/Flèche gauche darkred.png")
}
footer
{
	margin-right : 16.5em ;
}
div
{
	border-radius : 4px ;
}
table
{
	width : 100% ;
	border : 0 ;
	background : beige ;
	font-size : 16px ;
}
caption
{
	font-size : 24px ;
	font-weight : bold ;
	font-style : italic ;
}
td
{
	border : solid 1px black ;
}
th
{
	border : solid 1px black ;
	background : antiquewhite ;
}
.informations
{
	margin-left : 5% ;
	margin-right : 5% ;
	width : 90% ;
}
canvas:after
{
	content :
		"Il semble que votre ordinateur ou navigateur ne supporte pas la technologie canvas.
		Mettez à jour votre navigateur, ou changez-le." ;
}

/* Balises intégrées dans la page */

h1
{
	margin : 0 ;
	line-height : 1em ;
	font-size : 48px ;
}
h2
{
	margin : 0 ;
	border-radius : 4px ;
	background : khaki ;
	font-size : 32px ;
	text-align : center ;
	text-decoration : underline ;
}
h3
{
	margin : 0 ;
	font-style : italic ;
	font-size : 24px ;
}
hr
{
	margin : 0.5em ;
}
a
{
	color : inherit ;
	text-decoration : none ;
}
a:hover
{
	text-decoration : underline ;
}
b , select , .informations td:last-child
{
	font-weight : bold ;
	color : blue ;
}
summary
{
	cursor : pointer ;
	display : block ;
	width : 100% ;
	font-weight : bold ;
}
sup
{
	font-family : inherit ;
	font-weight : bold ;
	color : blue ;
}
th sup
{
	color : black ;
}
tt
{
	font-family : Peralta ;
	color : khaki ;
	text-shadow : 1px 1px 0px black ;
}

/* Balises fonctionnelles */

button
{
	display : block ;
	width : 100% ;
	font : inherit ;
	font-weight : bold ;
	font-style : italic ;
	z-index : 10 ;
}
input
{
	font-family : Times ;
	font-style : italic ;
	font-weight : normal ;
	color : red ;
	box-shadow : 2px 2px 6px black ;
}
select
{
	display : inline-block ;
	vertical-align : middle ;
}
résultat
{
	display : block ;
}
.appli
{
	cursor : pointer ;
	display : inline-block ;
	box-sizing : content-box ;
	border-radius : 4px ;
	height : 2em ;
	width : 2em ;
	background : white ;
	box-shadow : 2px 2px 6px black ;
}
.appli + span
{
	position : absolute ;
	display : none ;
	margin-left : 8px ;
	border-radius : 4px ;
	border : solid 2px grey ;
	background : aliceblue ;
	padding : 2px ;
	box-shadow : 2px 2px 6px black ;
}
.appli:hover + span:before
{
	position : absolute ;
	margin-left : -20px ;
	content : url("Images/Flèche gauche grey.png")
}
.appli:hover + span
{
	display : inline-block ;
}
.appli:active
{
	cursor : progress ;
	box-shadow : 2px 2px 0px black ;
}
.hasard:hover
{
	background : red ;
}
.hasard:hover + span:after
{
	content : "Réaliser une conversion aléatoire" ;
}
.crayon:hover
{
	background : yellow ;
}
.crayon:hover + span:after
{
	content : "Ecrire les résultats sur le carnet" ;
}
.alerte:hover
{
	background : lime ;
}
.alerte:hover + span:after
{
	content : "Voir les résultats" ;
}
.question:hover
{
	background : cyan ;
}
.question:hover + span:after
{
	content : "Obtenir plus d'informations" ;
}
.gomme:hover
{
	background : blue ;
}
.gomme:hover + span:after
{
	content : "Effacer le carnet" ;
}
.algo:hover
{
	background : magenta ;
}
.algo:hover + span:after
{
	content : "Visiter algodok.com" ;
}
.inutilisable
{
	cursor : default !important ;
	border : dotted 0.125em grey ;
	height : 1.75em ;
	width : 1.75em ;
	background : aliceblue !important ; /* et pas transparent */
	box-shadow : 0px 0px 0px black  !important ;
}

/* Classes et identifiants divers */

.décalée /* Attention !!! */
{
	float : right ;
}
.journal
{
	-moz-column-count : 2 ;
	-webkit-column-count : 2 ;
	-moz-column-gap : 2em ;
	-webkit-column-gap : 2em ;
	padding-left : 1em ;
	padding-right : 1em ;
}
.ombrée
{
	box-shadow : 8px 8px #004646 ;
}
.rouge
{
	color : red ;
}
.var , var:after
{
	font-weight : normal ;
}